﻿<Window x:Class="ListViewCustomStyle.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>

        <DataTemplate x:Key="iconTemplate">
            <DockPanel Height="33" Width="150">
                <Image Source="{Binding XPath=@Image}" Margin="2"/>
                <TextBlock DockPanel.Dock="Top" Text="{Binding XPath=@Name}" 
                     FontSize="13" HorizontalAlignment="Left" 
                     Margin="0,0,0,1" />
                <TextBlock Text="{Binding XPath=@Type}" FontSize="9" 
                     HorizontalAlignment="Left" Margin="0,0,0,1" />
            </DockPanel>
        </DataTemplate>

        <XmlDataProvider x:Key="myXmlDataBase" XPath="/myXmlData">
            <x:XData>
                <myXmlData xmlns="">
                    <Item Name = "Fish" Type="fish" Image="images\fish.png"/>
                    <Item Name = "Dog" Type="animal" Image="images\dog.png"/>
                    <Item Name = "Flower" Type="plant" Image="images\flower.jpg"/>
                    <Item Name = "Cat" Type="animal" Image="images\cat.png"/>
                </myXmlData>
            </x:XData>
        </XmlDataProvider>

        <DataTemplate x:Key="DisplayImage">
            <StackPanel Width="50">
                <Image Source="{Binding XPath=@Image}"/>
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="checkbox">
            <CheckBox IsChecked="{Binding IsSelected,
                              RelativeSource=
                              {RelativeSource AncestorType=ListViewItem}}" 
                  Margin="0,1,1,1" >

            </CheckBox>
        </DataTemplate>

        <ItemsPanelTemplate x:Key="panelTemplate">
               <WrapPanel ItemWidth="100" />
        </ItemsPanelTemplate>

        <Style TargetType="ListView" x:Key="GridView" >
            <Setter Property="View">
                <Setter.Value>
                    <GridView >
                        <GridViewColumn CellTemplate="{StaticResource checkbox}"/>
                        <GridViewColumn Header="Name" 
                        DisplayMemberBinding="{Binding XPath=@Name}"/>
                        <GridViewColumn Header="Type" 
                        DisplayMemberBinding="{Binding XPath=@Type}"/>
                        <GridViewColumn Header="Image"
                        CellTemplate="{StaticResource DisplayImage}"/>
                    </GridView>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="ListView" x:Key="TileView">
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Height="100" Width="90">
                            <Grid Width="70" Height="70" HorizontalAlignment="Center">
                                <Image Source="{Binding XPath=@Image}" Margin="6,6,6,9"/>
                            </Grid>
                            <TextBlock Text="{Binding XPath=@Name}" FontSize="13" 
                     HorizontalAlignment="Center" Margin="0,0,0,1" />
                            <TextBlock Text="{Binding XPath=@Type}" FontSize="9" 
                     HorizontalAlignment="Center" Margin="0,0,0,1" />
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <WrapPanel   ItemWidth="100"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <ScrollViewer  BorderBrush="Gray" BorderThickness="1">
                            <WrapPanel>
                                <ItemsPresenter />
                            </WrapPanel>
                        </ScrollViewer>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="ListView" x:Key="IconView">
            <Setter Property="ItemsPanel"  Value="{StaticResource panelTemplate}"/>
            <Setter Property="ItemTemplate" Value="{StaticResource iconTemplate}" />
            <Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate>
                        <ScrollViewer BorderBrush="Gray" BorderThickness="1">
                            <WrapPanel>
                                <ItemsPresenter />
                            </WrapPanel>
                        </ScrollViewer>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>
    <Grid>
        <TextBlock  x:Name="tb" Text=""  VerticalAlignment="Top"  HorizontalAlignment="Center"/>
        <ListView Name="lv" HorizontalAlignment="Center" VerticalAlignment="Center"  
              ItemsSource="{Binding Source={StaticResource myXmlDataBase},
                              XPath=Item}" 
              FontSize="12"  Style="{StaticResource GridView}"
              Background="LightBlue" >
 
        </ListView>
        <ComboBox Height="25" HorizontalAlignment="Left" SelectionChanged="listBox1_SelectionChanged" Margin="29,0,0,0" Name="listBox1" VerticalAlignment="Top" Width="120" >
            <ComboBoxItem Content="GridView"  IsSelected="True"/>
            <ComboBoxItem Content="TileView" />
            <ComboBoxItem Content="IconView" />
        </ComboBox>
    </Grid>
</Window>
